<template>
	<view class='pay-detail-box'>
		<u-navbar title="钻石明细" title-color="#010101" title-size="44rpx" :is-back="true" background="transparent">
		</u-navbar>

		<scroll-view class="scroll-view-style" :scroll-y="true">
			<view class="detail-list">
				<view class="list-item" v-for="(item,index) in mockData" :key="index">
					<view class="top">
						<view class="title">{{item.title}}</view>
						<view class="amount" :class="{deduct:item.amount<0}">{{item.amount}}</view>
					</view>
					<view class="bottom">
						<view class="time">{{item.time}}</view>
					</view>
				</view>
			</view>
			<view class="showAll">已显示全部</view>
		</scroll-view>



	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				mockData: [{
						title: '充值',
						amount: 1050,
						time: '2022-09-18 14:36:12'
					},
					{
						title: '送礼',
						amount: -1999,
						time: '2022-09-17 22:32:12'
					},
					{
						title: '活动奖励',
						amount: 120,
						time: '2022-09-18 14:36:12'
					},
					{
						title: '付费节目',
						amount: -990,
						time: '2022-09-18 14:36:12'
					},
					{
						title: '活动奖励',
						amount: 60,
						time: '2022-09-18 14:36:12'
					},
				]
			}
		},
		onLoad(option) {

		},
		onReady() {

		},
		methods: {

		},
	}
</script>

<style lang='scss' scoped>
	@import url('./index.scss');

	.scroll-view-style {
		width: 100%;
		height: 100vh;
	}

	u-navbar {
		font-weight: 700;
	}

	.pay-detail-box {
		background-color: #f5f5f5;
	}

	.detail-list {
		width: 100%;
		padding: 30rpx 34rpx;
		padding-top: 0;
		padding-bottom: 0;
		background-color: #fff;

	}

	.list-item {
		border-bottom: 2rpx solid #EDEDED;
		padding: 28rpx 0;
		height: 144rpx;

		.text {}

		&:last-child {
			border: none;
		}

	}

	.top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 6rpx;

		.test {}

		.title {
			font-weight: 400;
			font-size: 32rpx;
			color: #181818;
		}

		.amount {
			font-weight: bold;
			font-size: 36rpx;
			color: #181818;
		}

		.deduct {
			color: #838383;
		}
	}

	.time {
		font-size: 26rpx;
		color: #979797;
	}

	.showAll {
		font-weight: 400;
		font-size: 28rpx;
		color: #CDCDCD;
		text-align: center;
		margin-top: 52rpx;
	}
</style>